<template>
  <view class="stock-page">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <view class="search-bar">
          <up-search
              @search="handleConfirm"
              @change="handleConfirm"
              v-model="filter.search"
              placeholder="搜索盘点单号"
              shape="square"
              clearable
              :show-action="false"/>
        </view>
        <view class="filter-bar">
          <view class="filter-item">
            <up-dropdown ref="upDropdownItemRef">
              <up-dropdown-item v-model="filter.status" :title="title">
                <view class="slot-content" style="background-color: #ffffff">
                  <scroll-view scroll-y="true" style="height: 500rpx">
                    <view
                        v-for="(item, index) in options"
                        :key="index"
                        class="assets-class"
                        @click="handleFilterClick(item)"
                    >{{ item.label }}</view
                    >
                  </scroll-view>
                  <up-button type="primary" @click="clearFilter"
                  >清空</up-button
                  >
                </view>
              </up-dropdown-item>
            </up-dropdown>
          </view>
        </view>
      </template>
      <assetStock :dataList="dataList"/>
      <view class="footer-btn">
        <up-button
            @click="handleToAdd"
            type="primary"
            text="+ 新增资产盘点单"/>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import assetStock from '@/components/assetStocktaking/index';

import {ref, reactive, onMounted, computed} from "vue";
import request from "@/api/request";
import {onUnload} from "@dcloudio/uni-app";
import {debounce} from "lodash-es";

// 新增onMounted，接收参数并初始化过滤条件
onMounted(() => {
	filter.status = uni.getStorageSync('inventoryStatus') || '';
});

uni.$on('refresh-data', () => {
  paging.value.reload()
})

onUnload(() => {
  uni.$off('refresh-data')
})

const upDropdownItemRef = ref(null)

const filter = reactive({
  status: '',
  search: ''
})

const dataList = ref([]);

const paging = ref(null)

const options = ref([
  {
    label: '未盘点',
    value: 'NOT_STARTED'
  },
  {
    label: '部分盘点',
    value: 'PARTIAL'
  },
  {
    label: '盘点完成',
    value: 'INVENTORY_DONE'
  },
  {
    label: '完成',
    value: 'COMPLETED'
  }
]);

const title = computed(() => {
  if (!filter.status) return '盘点状态';
  const option = options.value.find(item => item.value === filter.status);
  return option ? option.label : '盘点状态';
});

const handleFilterClick = (item) => {
  filter.status = item.value
  upDropdownItemRef.value.close()
  if (paging.value) {
    paging.value.reload();
  }
}

const clearFilter = () => {
  filter.status = ''
  upDropdownItemRef.value.close()
  if (paging.value) {
    paging.value.reload();
  }
}

const handleConfirm = debounce(async () => {
  if (paging.value) {
    paging.value.reload();
  }
}, 1000);

const handleToAdd = () => {
  uni.navigateTo({
    url: '/pages/stocktaking/add'
  })
}

const queryList = (pageNo, pageSize) => {
  uni.showLoading({
    title: '加载中...',
    mask: true
  })
  let data = {
    code: "getAssetInventoryList",
    allColumnFilter: true,
    filters: [
      {
        name: 'inventory_status',
        value: filter.status
      },
      {
        name: 'inventory_code',
        value: filter.search
      }
    ],
    pageInput: {currentPage: pageNo, pageSize: pageSize},
    permissionKey: "",
  }
  request.post('/api/module/GetViewTable', data).then(res => {
    if (res.code && res.isSuccess) {
      paging.value.complete(res.result.viewTable)
      uni.hideLoading()
    } else {
      uni.showToast({title: res.error, duration: 1500, icon: "error"});
      uni.hideLoading();
    }
  }).catch(err => {
    uni.hideLoading()
    console.error(err)
  })
}

</script>

<style lang="scss" scoped>
.stock-page {
  background-color: #f5f5f5;
  min-height: calc(100vh - var(--window-top, 0px));

  .search-bar {
    display: flex;
    align-items: center;
    gap: 20rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 20rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }

  .filter-bar {
    background: #fff;
    border-bottom: 1rpx solid #f5f5f5;

    .assets-class {
      width: 100%;
      box-sizing: border-box;
      padding: 20rpx;
    }

    .filter-item {
      width: 100%;
      box-sizing: border-box;
      padding: 20rpx;

      :deep(.u-dropdown__menu__item) {
        justify-content: left !important;
      }
    }
  }

  :deep(.zp-view-super) {
    padding-bottom: 130rpx !important;
  }

  .footer-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 30rpx;
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
}
</style>
